import React, { Component } from 'react';
import { connect } from 'react-redux';
import '../../resources/styles/Login.css';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: ''
    }
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin() {
    const { email, password } = this.state;
    this.props.dispatch({
      type: '$login',
      param: { email, password }
    })
  }

  render() {
    return (
      <div className="signin">
        <div className="signin-form">
          <div className="signin-form-title">
            登录
          </div>
          <div className="signin-form">
            <input
              type="email"
              placeholder="请输入邮箱"
              onChange={e => this.setState({ email: e.target.value })}
              value={this.state.email} />
            <input
              type="password"
              placeholder="请输入密码"
              onChange={e => this.setState({ password: e.target.value })}
              value={this.state.password} />
            <div
              className="btn primary"
              onClick={this.handleLogin}>登录</div>
            <div
              className="btn secondary"
              onClick={() => this.props.history.push('/register')}>注册</div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(state => state)(Login);
